<!-- <div [class.yellow]="a === a" [ngClass]="{yellow: a === a, bold: b === '8:00 am'}"></div> -->

<div class="card bg-secondary pointer">
  <div class="card-body">
    <h2 class="card-title">Event: {{event?.name}}</h2>
    <div class="card-text">
      <div>Price: ${{event?.price}}</div>
      <div>Date: {{event?.date}}</div>

      <div [ngClass]="getClasses()"
           [ngStyle]="getStyles()"
           [ngSwitch]="event?.time">
        Time: {{event?.time}}
        <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
        <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
        <span *ngSwitchDefault>(Normal Start)</span>
      </div>

      <div *ngIf="event?.location">Address: {{event?.location?.address}}, {{event?.location?.city}}, {{event?.location?.country}}</div>
      <div *ngIf="event?.onlineUrl">Online Url: {{event?.onlineUrl}}</div>

    </div>
  </div>
</div>
